<load href="{:$Theme['T']['root']}js/swfobject.js"/>
<load href="{:$Theme['T']['root']}js/web_socket.js"/>
<load href="{:$Theme['T']['root']}js/json.js"/>

<script type="text/javascript">
    if (typeof console == "undefined") {    this.console = { log: function (msg) {  } };}
    WEB_SOCKET_SWF_LOCATION = "/swf/WebSocketMain.swf";
    WEB_SOCKET_DEBUG = true;
    var ws, name, client_list={},timeid, reconnect=false;
    function init() {
        // 创建websocket
        ws = new WebSocket("ws://"+document.domain+":8480");
        // 当socket连接打开时，输入用户名
        ws.onopen = function() {
            timeid && window.clearInterval(timeid);
            if(!name)
            {
                //show_prompt();
            }
            if(!name) {
                //return ws.close();
            }
            if(reconnect == false)
            {
                // 登录
                var login_data = JSON.stringify({"type":"login","client_name":name,"room_id":1});
                console.log("websocket握手成功，发送登录数据:"+login_data);
                ws.send(login_data);
                reconnect = true;
            }
            else
            {
                // 断线重连
                var relogin_data = JSON.stringify({"type":"re_login","client_name":name,"room_id":1});
                console.log("websocket握手成功，发送重连数据:"+relogin_data);
                ws.send(relogin_data);
            }
        };
        // 当有消息时根据消息类型显示不同信息
        ws.onmessage = function(e) {
            console.log(e.data);
            var data = JSON.parse(e.data);
            switch(data['type']){
                // 服务端ping客户端
                case 'ping':
                    ws.send(JSON.stringify({"type":"pong"}));
                    break;;
                // 登录 更新用户列表
                case 'login':
                    //{"type":"login","client_id":xxx,"client_name":"xxx","client_list":"[...]","time":"xxx"}
                    say(data['client_id'], data['client_name'],  data['client_name']+' 加入了聊天室', data['time']);
                    flush_client_list(data['client_list']);
                    console.log(data['client_name']+"登录成功");
                    break;
                // 断线重连，只更新用户列表
                case 're_login':
                    //{"type":"re_login","client_id":xxx,"client_name":"xxx","client_list":"[...]","time":"xxx"}
                    flush_client_list(data['client_list']);
                    console.log(data['client_name']+"重连成功");
                    break;
                // 发言
                case 'say':
                    //{"type":"say","from_client_id":xxx,"to_client_id":"all/client_id","content":"xxx","time":"xxx"}
                    say(data['from_client_id'], data['from_client_name'], data['content'], data['time']);
                    break;
                // 用户退出 更新用户列表
                case 'logout':
                    //{"type":"logout","client_id":xxx,"time":"xxx"}
                    say(data['from_client_id'], data['from_client_name'], data['from_client_name']+' 退出了', data['time']);
                    flush_client_list(data['client_list']);
            }
        };
        ws.onclose = function() {
            console.log("连接关闭，定时重连");
            // 定时重连
            window.clearInterval(timeid);
            timeid = window.setInterval(init, 3000);
        };
        ws.onerror = function() {
            console.log("出现错误");
        };
    }

    // 输入姓名
    function show_prompt(){
        name = prompt('输入你的名字：', '');
        if(!name){
            alert('姓名输入为空，请重新输入！');
            show_prompt();
        }
    }

    // 提交对话
    function onSubmit() {
        var input = document.getElementById("textarea");
        var to_client_id = $("#client_list option:selected").attr("value");
        var to_client_name = $("#client_list option:selected").text();
        ws.send(JSON.stringify({"type":"say","to_client_id":to_client_id,"to_client_name":to_client_name,"content":input.value}));
        input.value = "";
        input.focus();
    }

    // 刷新用户列表框
    function flush_client_list(client_list){
        var userlist_window = $("#userlist");
        var client_list_slelect = $("#client_list");
        userlist_window.empty();
        client_list_slelect.empty();
        userlist_window.append('<h4>在线用户</h4><ul>');
        client_list_slelect.append('<option value="all" id="cli_all">所有人</option>');
        for(var p in client_list){
            userlist_window.append('<li id="'+client_list[p]['client_id']+'">'+client_list[p]['client_name']+'</li>');
            client_list_slelect.append('<option value="'+client_list[p]['client_id']+'">'+client_list[p]['client_name']+'</option>');
        }
        $("#client_list").val(select_client_id);
        userlist_window.append('</ul>');
    }

    // 发言
    function say(from_client_id, from_client_name, content, time){
        $("#dialog").append('<div class="speech_item"><img src="http://lorempixel.com/38/38/?'+from_client_id+'" class="user_icon" /> '+from_client_name+' <br> '+time+'<div style="clear:both;"></div><p class="triangle-isosceles top">'+content+'</p> </div>');
    }

    $(function(){
        select_client_id = 'all';
        $("#client_list").change(function(){
            select_client_id = $("#client_list option:selected").attr("value");
        });
    });
</script>